<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>添加权限</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="" style="margin: 10%;">
  <div class="layui-form-item">
    <label class="layui-form-label">上级权限</label>
    <div class="layui-input-block">
      <input type="hidden" name="parent_id" id="parent_id" value="0">
      <button class="layui-btn" id="select_parent">选择上级权限</button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" autocomplete="off" placeholder="请输入名称" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">路径</label>
    <div class="layui-input-block">
      <input type="text" name="url" autocomplete="off" placeholder="请输入路径" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">打开方式</label>
    <div class="layui-input-block">
      <input type="radio" name="open_type" value="0" title="跳转" checked>
      <input type="radio" name="open_type" value="1" title="点击">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">说明</label>
    <div class="layui-input-block">
      <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="addpower">确认</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/static/layui.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/base.js"></script>
<script>
layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  var util = layui.util;

  // 权限选择器
  let data = JSON.parse('{{ powers | tojson | safe}}');
  dropdown.render({
    elem: '#select_parent',
    data: data,
    clickScope: 'all',
    customName: { // 自定义 data 字段名 --- 2.8.14+
      id: 'id',
      title: 'name',
      children: 'children'
    },
    click: function(item){
      // 修改按钮的值
      $("#select_parent").text(item.name);
      // 修改父级权限的 id
      $("#parent_id").val(item.id);
    }
  });


  // 提交事件
  form.on('submit(addpower)', function(data){
    var field = data.field; // 获取表单字段值
    $.ajax({
      url: '/power/add',
      type: 'POST',
      data: JSON.stringify(field),
      dataType: 'json',
      success: function(response) {
        parent.layer.closeAll();
        layer.msg(response.data);
        parent.location.href = "/power/";
      }
    });
    return false; // 阻止默认 form 跳转
  });

});
</script>

</body>
</html>